<template>
  <div>
    <h1>A模块的名字{{ name }}</h1>
    <button @click="f">改A的名字</button>
    <router-link :to="'/user?qq=' + b">区用户</router-link>
    <router-link :to="{ path: '/user', query: { qq: b, ww: 123, tt: 7777 } }">777</router-link>
    <router-link :to="{ name: 'user123', query: { qq: b, ww: 123, tt: 7777 } }">777</router-link>
    <br />
    <router-link to="/list/2">list</router-link>
    <router-link :to="{ name: 'list123', params: { pn: 6, q: 1, w: 3, r: 5 } }">list</router-link>
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  路由传参的方式： query  params

  编程式导航： 使用$router实例实现页面跳转

*/
export default {
  name: 'XXX',
  data() {
    return {
      b: 666
    }
  },
  methods: {
    f() {
      this.$store.commit('myA/changeName', "小工");
      setTimeout(() => {
        this.$router.push('/list/8') // PUSH 的参数等同于 to的参数
        //  push  replace  go  back  go(-1) == back()
        //  push 会新增历史记录 ；  replace不会新增历史记录
      }, 2000)
    }
  },
  computed: {
    name() {
      return this.$store.state.myA.name
    }
  }
}
</script>
<style lang="less">
</style>